<template>
  <div class="task">
<!--    <van-nav-bar-->
<!--      title="标题"-->
<!--      left-text="返回"-->
<!--      right-text="按钮"-->
<!--      left-arrow-->
<!--      @click-left="onClickLeft"-->
<!--      @click-right="onClickRight"-->
<!--    />-->
    <van-swipe class="my-swipe"  indicator-color="white" style="width: 375px;">
      <van-swipe-item v-for="(image, index) in mssg.cardList" :key="index" style="width: 375px;">
        <p>{{image.content}}</p>
      </van-swipe-item>
    </van-swipe>


    <!--<van-field name="switch" label="开关"> -->
    <van-cell  size="large" >{{mssg.habitName}}</van-cell>

      <van-field name="switch" >

      <template #input>

        <van-stepper v-model="value" min="0" @change="onChange"/>
        <span>{{str}}</span>

          <van-icon name="play-circle-o"  @click="webviewTimer(1)" size="25" :style="{ display: visibleCancel }"/>
          <van-icon name="pause-circle-o"  @click="webviewTimer(2)" size="25" :style="{ display: visiblePublish  }"/>

        <van-switch v-model="switchChecked" @change="sendTimeSave" size="20" />


        <van-button size="mini" @click="addCardbyHabit(mssg.id)">新增</van-button>
<!--        <van-tabbar-item icon="home-o"><router-link to="/">home</router-link></van-tabbar-item>-->
        <van-button size="mini" @click="changeRouter(mssg.id,mssg.habitName)">管理</van-button>
      </template>





    </van-field>
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" >
      <van-field v-model="title" label="卡片标题"  placeholder="请输入卡片标题" />
      <van-field v-model="transcript" label="卡片描述"  placeholder="请输入描述" />
      <van-field v-model="content" label="卡片内容"  placeholder="请输入卡片内容" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="submitCard">
          提交
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {request} from "../network/request";
import router from '../router';
export default {
  name: 'Task',
  props: {
    mssg:'',
  },
  data () {
    return {
      title:'',
      transcript:'',
      content:'',
      show:false,
      images: [],
      msg: 'Welcome to Your Vue.js App',
      switchChecked: false,
      value: 0,
      habit1:'',
      data:'',
      str:'',
      visibleCancel:'',
      visiblePublish:'none',
      state:0
    }
  },
  created() {

    //
    // if(null==this.mssg.habitDetail||null==this.mssg.habitDetail.state){
    //   console.log("dddddafdas"+this.mssg.habitDetail.state);
    //   this.switchChecked=false;
    // }else{
    //   console.log("sdfasdf");
    //   this.switchChecked=true;
    // }
    // if(this.mssg.){
    //   this.value=
    // }
    if(null==this.mssg.habitDetail||null==this.mssg.habitDetail.todayTime){
      console.log("this.mssg=====");
      this.str=this.formartTime(0);
    }else{
      this.str=this.formartTime(this.mssg.habitDetail.todayTime);
      console.log("this.mssg");
      console.log("this.mssg.habitDetail.todayTime="+this.mssg.habitDetail.todayTime);
      console.log("str="+this.str);
      console.log(this.mssg);
    }


   if(null != this.mssg.habitDetail){
      this.value=this.mssg.habitDetail.once;
    };

    // if(''!=this.mssg.habitDetail&&""!=this.mssg.habitDetail.once){
    //   console.log("this.mssg.h");
    //   console.log(this.mssg.habitDetail.once);
    // }
  },

  methods: {
    //路由跳转
    changeRouter(value,valueb){
      const path="/echarts?id="+value+"&name="+valueb;
      this.$router.push(path)
    },
    //添加卡片
    submitCard(){
      request({
        // url: '/card/addCard',
        url: '/card/addCardByHabit',
        method:'post',
        data: { title: this.title,
          transcript: this.transcript,
          content: this.content,
          id:this.mssg.id},
      }).then(res => {
        console.log(res);
        this.title='';
        this.transcript='';
        this.content='';
      }).catch(err => {
        // console.log(err);
      })
      console.log(this.title);
      console.log(this.content);
      console.log(this.transcript);
    },

    addCardbyHabit(id){
      console.log(id);
      this.show=true;
    },

    onChange(){
      console.log(this.mssg.habitName);

      if(this.mssg.habitName.indexOf("-")!=-1){
        console.log("bohan");

        request({
          url: '/taskDetail/updateTaskDetail',
          method:'post',
          data: { habitId: this.mssg.id,once:this.value},
        }).then(res => {
          console.log(res);
          this.habit1=res.data[0];
          console.log(this.habit1);

        }).catch(err => {
          console.log(err);
        })
      }else{
        console.log("bubaohan");
        request({
          url: '/habitDetail/updateHabitDetail',
          method:'post',
          data: { habitId: this.mssg.id,once:this.value},
        }).then(res => {
          console.log(res);
          this.habit1=res.data[0];
          console.log(this.habit1);

        }).catch(err => {
          console.log(err);
        })
      }



    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
    start() {
      this.$refs.countDown.start();
    },
    pause() {
      this.$refs.countDown.pause();
    },
    reset() {
      this.$refs.countDown.reset();
    },
    finish() {
      Toast('倒计时结束');
    },

    //获取每日任务，和卡片（同步，还是异步加载）
   getCardByHabitId(){
     request({
       url: '/habit/getHabitList',
       method:'get'
     }).then(res => {
       console.log(res);
       this.habit1=res.data[0];
       console.log(this.habit1);

     }).catch(err => {
       console.log(err);
     })
   },

   //------计时开始
    webviewTimer(s) {
      // this.timeOut = setTimeout(() => {
      //   this.webviewTimer()
      // }, 1000)

      let that=this;
      if(s===1){
        this.visibleCancel='none';
        this.visiblePublish='';
        console.log("start");
        that.timeStart=  setInterval(function (){
          console.log(that.mssg.habitDetail);
          if(null==that.mssg.habitDetail.todayTime){
            that.mssg.habitDetail.todayTime=0;
          }
          that.mssg.habitDetail.todayTime=that.mssg.habitDetail.todayTime+1;

          const s=that.mssg.habitDetail.todayTime;
          const day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
          const hour = Math.floor((s - day * 24 * 3600) / 3600);
          const minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
          const second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
          if (hour) {
            that.str= hour + ":" + minute + ":" + second;
          } else {
            if (second < 10) {
              if (minute < 10) {
                if(second<10){
                  that.str= "0" + minute + ":" +  "0" +second;
                }else{
                  that.str= "0" + minute + ":" + second + "0";
                }
              } else {
                that.str= minute + ":" + second + "0";
              }
            } else {
              that.str= minute + ":" + second;
            }
          }
        },1000);
      }

      if(s===2){
        if(this.mssg.habitName.indexOf("-")!=-1){
          that.sendTaskTimeSave();
          console.log("ddd");
          this.visibleCancel='';
          this.visiblePublish='none';
          clearInterval(that.timeStart);
        }else{
          that.sendTimeSave();
          console.log("ddd");
          this.visibleCancel='';
          this.visiblePublish='none';
          clearInterval(that.timeStart);
        }


      }
    },
    //发送时间数据给后台保存
    sendTimeSave(){
      if(this.switchChecked=true){
        this.state=1;
      }else{
        this.state=0;
      }
      request({
        url: '/habitDetail/updateHabitDetail',
        method:'post',
        data: { habitId: this.mssg.id,todayTime:this.mssg.habitDetail.todayTime,state:this.state},
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
    },

    //发送时间数据给后台保存
    sendTaskTimeSave(){

      if(this.switchChecked=true){
        this.state=1;
      }else{
        this.state=0;
      }
      request({
        url: '/taskDetail/updateTaskDetail',
        method:'post',
        data: { habitId: this.mssg.id,todayTime:this.mssg.habitDetail.todayTime,state:this.state},
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
    },
    formartTime(s){
      const day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
      const hour = Math.floor((s - day * 24 * 3600) / 3600);
      const minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
      const second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
      if (hour) {
        return  hour + ":" + minute + ":" + second;
      } else {
        if (second < 10) {
          if (minute < 10) {
            if(second<10){
              return "0" + minute + ":" +  "0" +second;
            }else{
              return "0" + minute + ":" + second + "0";
            }
          } else {
            return minute + ":" + second + "0";
          }
        } else {
          return minute + ":" + second;
        }
      }
    }
  },



}
</script>

<style scoped>
/*.task{*/
/*  padding-bottom: 50px;*/
/*}*/

.my-swipe .van-swipe-item {
  /*color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 30px;
  height: 150px;
  width: 350px;*/

  color: #fff;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #39a9ed;
  height: 150px;
  border-radius:10px;
  /*margin:10px;*/
  box-sizing: border-box;
  /*width: 350px;*/
  height: 150px
}

.swiper-box {
  margin: 30px;
  border-radius: 30px;
  overflow: hidden;
  /* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
  transform: translateY(0);
}

.my-swipe .van-swipe-item p{
  text-indent: 2em;
  font-size: 10px;
 /* height: 150px;
  width: 350px;
  word-wrap:break-word;
  word-break:normal;*/
}


</style>
